<!--
 * @Author: wjk
 * @Date: 2020-07-22 11:29:45
 * @LastEditors: wjk
 * @LastEditTime: 2020-12-03 16:32:05
 * @description: file content
-->
<template>
  <view class="commodity-container bonus-gift commodity-freight">
    <view class="goods-found">
      <commodity-send ref="send" commodity-type="bonusGift" :all-data="allData" @validProps="validProps" />
      <view class="sLine" @click="scrollToBottom">
        <view class="lCont">运费</view>
        <view class="rCont">
          <view class="ferightPrice">
            {{ freightData.total_freight || ' ' }}
          </view>
          <!-- <image class="right_arror" src="/static/images/icon/icon_arror_right.png" /> -->
        </view>
      </view>
    </view>
    <scroll-view v-if="allData" class="bouns-scroll" scroll-y scroll-with-animation :scroll-top="scrollTop" @scroll="onscroll">
      <commodity-bonus-gift v-if="allData.gifts" ref="bonusGift" :all-data="allData" type="calculate" @calculTotal="calculTotal" @ruleControl="ruleControl" />
      <view v-if="freightData.total" class="ferightContent">
        <view class="freight-example">
          <view>运费明细如下:</view>
          <view class="freight-total">
            <block v-if="freightData.totalList">
              <view v-for="(text, i) in freightData.totalList" :key="i">{{ text }}</view>
            </block>
            <view v-else>{{ freightData.total }}</view>
          </view>
          <view class="freight-desc">{{ freightData.desc }}</view>
        </view>
      </view>
    </scroll-view>
    <base-popup :show="fShow" :show-close="false" @close="closePopup">
      <section class="maskContainer addressMask" @click.stop="" @touchmove.prevent>
        <view class="cartClose" @click="closePopup">
          <image src="/static/images/icon/icon_close.png" />
        </view>
        <view class="serviceContainer">
          <view class="title">运费规则</view>
          <scroll-view class="fright-rule-box" scroll-y>
            <view class="freight-rule-item">
              <view class="rule-item grey">商品数量区间</view>
              <view class="rule-item grey">首件邮费</view>
              <view class="rule-item grey">续件邮费</view>
            </view>
            <view v-for="(item, index) in freightIntervalDetails" :key="index" class="freight-rule-item">
              <view class="rule-item">{{ item.goodsNumberRange }}</view>
              <view class="rule-item">{{ item.firstFeeStr }}</view>
              <view class="rule-item">{{ item.continuationFeeStr }}</view>
            </view>
          </scroll-view>
        </view>
        <view class="maskBottomBtn" @click="closePopup">
          我知道了
        </view>
      </section>
    </base-popup>
    <!-- <baseNav title="用户口碑" nav-position="fixed"></baseNav> -->
  </view>
</template>

<script>
import './index.scss'
import CommodityBonusGift from './components/commodity-option/commodity-bonus-gift'
import CommoditySend from './components/commodity-option/commodity-send'
export default {
  name: 'UserComment',
  components: {
    CommoditySend,
    CommodityBonusGift
  },

  data() {
    return {
      allData: {},
      freightIntervalDetails: [], // 运费规则列表
      fDialog: false,
      fShow: false, // 运费规则弹窗显示
      oldScroll: 0,
      scrollTop: 0,
      bonus_gift_id: null,
      freightData: {},
      freightArea: {},
      totalArr: []
    }
  },
  onLoad(option) {
    this.bonus_gift_id = option.bonus_gift_id
    // this._getDataList()
  },
  methods: {
    async _getDataList(bonus_gift_id) {
      const res = await this.$api.goodsApi.getBonusFright({
        bonus_gift_id: this.bonus_gift_id,
        deliveryArea: this.freightArea.province
      })
      if (!res.success) return
      this.$set(this, 'allData', res.data)
      if (this.$refs.bonusGift) {
        this.$refs.bonusGift.setGoodsList(res.data)
      }
      this.getFreight()
    },
    validProps(address) {
      this.freightArea = address.defaultAddress
      this._getDataList()
    },
    ruleControl(e) {
      this.freightIntervalDetails = e
      this.$set(this, 'fShow', true)
    },
    closePopup() {
      this.$set(this, 'fShow', false)
    },
    async calculTotal(e) {
      this.totalArr = e
      this.getFreight()
    },
    onscroll(e) {
      this.oldScroll = e.detail.scrollTop
    },
    scrollToBottom() {
      if (!this.freightData.total) {
        return
      }
      this.scrollTop = this.oldScroll
      this.$nextTick(function() {
        this.scrollTop = 4000
      })
    },
    async getFreight() {
      if (!this.totalArr.length || !this.freightArea.province) {
        if (this.$refs.bonusGift) {
          this.$refs.bonusGift.setFreightData()
        }
        this.freightData = {}
        return
      }
      const res = await this.$api.goodsApi.getBoxFright({
        deliveryArea: this.freightArea.province,
        deliveryAreaCode: '',
        shoppingList: JSON.stringify(this.totalArr)
      })
      if (res.success) {
        this.freightData = res.data
        this.freightData.totalList = this.freightData.total.split('\n')
        if (this.$refs.bonusGift) {
          this.$refs.bonusGift.setFreightData(this.freightData)
        }
      }
    }
  },
  onPullDownRefresh() {
    if (this.refreshing) return
    this.refreshing = true
    this._getDataList()
    setTimeout(() => {
      uni.stopPullDownRefresh()
      this.refreshing = false
    }, 200)
  }
}
</script>

<style lang="scss" scoped>
.commodity-freight{
  overflow: hidden;
  padding-bottom: 0px;
  padding-bottom: calc(0px + constant(safe-area-inset-bottom));
  padding-bottom: calc(0px + env(safe-area-inset-bottom));
}
.bouns-scroll{
  height: calc(100vh - 220rpx);
}
.commodity-container .goods-found .sLine .rCont{
  align-items: center;
  .ferightPrice{
    color: #EB5424;
    font-weight: bold;
  }
  .right_arror{
    top: 0;
  }
}
.ferightContent{
  background-color: #fff;
  padding: 15rpx;
  margin-bottom: 100rpx;
  .freight-rule{
    margin: 20rpx 0;
    color: $color-price;
  }
  .freight-total{
    margin: 20rpx 0;
    line-height: 34rpx;
    font-size: 24rpx;
    color: #666;
  }
  .freight-desc{
    font-size: 24rpx;
    color: #666;
  }
}
.addressMask {
    height: 900rpx;
    .serviceContainer {
      height: 720rpx;
      overflow: hidden;
      .title{
        font-weight: bold;
        line-height: 50rpx;
        font-size: 34rpx;
      }
      .fright-rule-box{
        height: 680rpx;
        margin-top: 20rpx;
        .freight-rule-item{
          display: flex;
          align-items: center;
          margin-bottom: 32rpx;
          justify-content: space-between;
          .rule-item{
            flex: 1;
            font-size: 28rpx;
            color: #000;
            &.grey{
              color: #999999;
            }
            &:nth-child(1){
              text-align: left;
            }
            &:nth-child(2){
              text-align: center;
            }
            &:nth-child(3){
              text-align: right;
            }
          }
        }
      }
    }
}
</style>
